Virtual DOM
必要最小限のDOM更新
vdomのリポジトリ
VDOMはJSONで表現することが多い
ASTと同じような感じ
code:ts
{
nodeName: "div",
children: [
{
nodeName: "input",
attributes: {
type: "text",
placeholder: "Search",
onChange: ""
},
children: []
},
{
nodeName: "List",
attributes: {
},
children: []
}
]
};
DOM構築
整合性のチェック
レンダリングツリーの構築
レイアウト計算
など
JSX
↓Babelで
pure JS
この変換要る？コンパイラがなくて作るの面倒だからかなmrsekut.icon
この変換は静的に行えるから別にパフォーマンス云々の問題にならないからどうでもいいんか
↓Preactのh関数で
VDOM(json)
↓Preactの関数で
DOM
流れ
仮想DOMツリーを2種類用意する（変更前後のツリー2種類）
何らかのアクションでstateが書き換わる
仮想DOMを再構築する
変更前後の仮想DOMツリーを用いて差分検知する
差分があった箇所だけリアルDOMに反映する
変更時の内部手順
初回は全画面をVDOMで構築
これを本物のDOMに変換して描画
変更があったら、再び全画面をVDOMで構築
一つ昔のVDOMと比較し、差分のみを本物のDOMに反映する
memo
変更のたびにVDOMを全て作るのは仕方がないっぽい
ここも改善できたらもっと速くなりそうだなー(こなみ)mrsekut.icon
本物のDOMを作るコストよりはめちゃくちゃ低いらしい
ツリーの比較アルゴリズム
要素のタグが変更されたら、その子も全て変更する
ある要素がツリーの別の改装に移動することはない
同じ階層で要素が入れ替わるときは、要素に付けた一意のkeyで追跡する
memo
全ての比較をするわけではなく、重要なところだけを見てコストを抑えているらしい
アニメーションとかどうやってるんだ？
VDOMからDOMを作る内部処理をしりたい
そもそもブラウザってどうやって描画してるんだ？
DOM作成のどの辺の処理がコストが高い原因になってるの？
rs
rs
参考
くわしい
まだ全部読んでない
作って学ぶ